<script setup>

import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const viewData = ref([]);
const para = ref({
    name: null,
    postName: null
});


const obj = ref({
    talentPoolId: null,
    talentName: null,
    sex: null,
    postName: null,
    workKind: null,
    education: null,
    certification: null,
    workAge: null,
    phone: null,
    idCard: null,
    address: null,
    createTime: null,
    state: null,
    personChargeId: null,
    personChargeNum: null,
    personChargeName: null
});

const obj2 = ref({
    num: null,
    name: null,
    sex: null,
    departmentId: null,
    departmentName: null,
    postId: null,
    postName: null,
    phone: null,
    salaryId: null,
    money: null,
    entryTime: null,
    idCard: null,
    education: null,
    certification: null,
    address: null,
    state: null,
    password: null,
    recruitId: null,
    talentPoolId: null,
    recruitState: null
});

const showDialog = ref(false);
const showDialog2 = ref(false);
const pageInfo = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0
});

let getList = () => {
    axios({
        method: "POST",
        url: `/api/recruitSchedule/list`,
        data: {
            ...para.value,
            ...pageInfo
        }
    }).then((resp) => {
        if (resp.data.code === 200) {
            viewData.value = resp.data.data.list;
            viewData.value.forEach(e => {
                switch (e.state) {
                    case 0:
                        e.state = '待招聘';
                        break;
                    case 1:
                        e.state = '招聘中';
                        break;
                    case 2:
                        e.state = '笔试考核中';
                        break;
                    case 3:
                        e.state = '面试考核中';
                        break;
                    case 4:
                        e.state = '招聘成功';
                        break;
                    case 5:
                        e.state = '招聘失败';
                        break;
                    default:
                        e.state = '招聘已取消';
                }
            });
            pageInfo.total = resp.data.data.count ? resp.data.data.count : 0;
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    })
};

// const addobj = () => {
//     obj.value.num = null;
//     obj.value.money = null;
//     obj.value.reason = null;
//     obj.value.time = null;
//     obj.value.auditor = null;
//     obj.value.reason = null;

//     isUpdate.value = false;
//     showDialog.value = true;
// };

const handleUpdate = (row) => {
    obj.value.state = row.state + 1;
    obj.value.id = row.id;

    showDialog.value = true;
};
const handleOk = (row) => {
    obj2.value.recruitId = row.id;
    obj2.value.talentPoolId = row.talentPoolId;
    obj2.value.recruitState = 4;

    obj2.value.name = row.talentName;
    obj2.value.sex = row.sex;
    obj2.value.postId = row.talentPoolId;
    obj2.value.phone = row.phone;
    obj2.value.idCard = row.idCard;
    obj2.value.education = row.education;
    obj2.value.certification = row.certification;
    obj2.value.address = row.address;

    showDialog2.value = true;
};

const handleNo = (row) => {
    obj.value.state = 5;
    obj.value.id = row.id;
    obj.value.talentPoolId = row.talentPoolId;

    const axiosPara = {
        data: obj.value
    };

    axiosPara.method = "PATCH";
    axiosPara.url = "/api/recruitSchedule/delete";

    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });
};

const handleDelete = (row) => {
    obj.value.state = 6;
    obj.value.id = row.id;
    obj.value.talentPoolId = row.talentPoolId;

    const axiosPara = {
        data: obj.value
    };

    axiosPara.method = "PATCH";
    axiosPara.url = "/api/recruitSchedule/delete";

    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });
};

const selectobj = () => {
    getList();
};

const submitData = () => {
    const axiosPara = {
        data: obj.value
    };

    axiosPara.method = "PATCH";
    axiosPara.url = "/api/recruitSchedule/update";

    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            showDialog.value = false;
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });

};

const addEmployee = () => {
    const axiosPara = {
        data: obj2.value
    };

    axiosPara.method = "POST";
    axiosPara.url = "/api/recruitSchedule/hire";

    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            showDialog.value = false;
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });
};

onMounted(() => {
    getList();
});
</script>

<template>
    <div>
        <header class="header">
            <div class="wrapper">
                <div>
                    <span>名字:</span>
                    <el-input v-model="para.name" size="small"></el-input>
                </div>
                <div>
                    <span>应聘职务:</span>
                    <el-input v-model="para.postName" size="small"></el-input>
                </div>
            </div>
            <div class="w-button">
                <el-button @click="selectobj">查询</el-button>
            </div>
        </header>

        <main>
            <el-table :data="viewData">
                <el-table-column prop="talentName" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
                <el-table-column prop="postName" label="应聘职务"></el-table-column>
                <el-table-column prop="workKind" label="应聘类型"></el-table-column>
                <el-table-column prop="state" label="招聘进度"></el-table-column>
                <el-table-column prop="personChargeName" label="负责人"></el-table-column>
                <el-table-column label="审批">
                    <template #default="scope">
                        <el-button size="small" @click="handleUpdate(scope.row)">下一轮</el-button>
                        <el-button size="small" type="danger" @click="handleOk(scope.row)">录用</el-button>
                        <el-button size="small" @click="handleNo(scope.row)">招聘失败</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">取消招聘</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </main>

        <footer>
            <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
                @size-change="getList" @current-change="getList" />

        </footer>

        <el-dialog v-model="showDialog">
            <button @click="submitData">提交</button>
        </el-dialog>

        <el-dialog v-model="showDialog2">
            <div>
                <span>员工编号:</span>
                <el-input v-model="obj2.num"></el-input>
            </div>
            <div>
                <span>姓名:</span>
                <el-input v-model="obj2.name"></el-input>
            </div>
            <div>
                <span>性别:</span>
                <el-input v-model="obj2.sex"></el-input>
            </div>
            <div>
                <span>部门:</span>
                <el-input v-model="obj2.departmentId"></el-input>
            </div>
            <div>
                <span>职务:</span>
                <el-input v-model="obj2.postId"></el-input>
            </div>
            <div>
                <span>手机号:</span>
                <el-input v-model="obj2.phone"></el-input>
            </div>
            <div>
                <span>基础工资:</span>
                <el-input v-model="obj2.salaryId"></el-input>
            </div>
            <div class="block">
                <span class="demonstration">入职时间</span>
                <el-date-picker v-model="obj2.time" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
                    placeholder="Pick a Date" />
            </div>
            <div>
                <span>身份证号:</span>
                <el-input v-model="obj2.idCard"></el-input>
            </div>
            <div>
                <span>学历:</span>
                <el-input v-model="obj2.education"></el-input>
            </div>
            <div>
                <span>证书:</span>
                <el-input v-model="obj2.certification"></el-input>
            </div>
            <div>
                <span>住址:</span>
                <el-input v-model="obj2.address"></el-input>
            </div>
            <div>
                <span>状态:</span>
                <el-input v-model="obj2.state"></el-input>
            </div>
            <div>
                <span>密码:</span>
                <el-input v-model="obj2.password"></el-input>
            </div>
            <el-button @click="addEmployee">提交</el-button>
        </el-dialog>

    </div>
</template>

<style scoped>
.header {
    display: flex;
    flex-direction: column;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

.wrapper>div {
    display: flex;
    flex-direction: row;
    margin-right: 1vw;
    gap: 0.5vw;
}

.wrapper>div>span {
    flex: 0 0 auto;
    /* flex-basis: auto; */
    /* flex-shrink: 0; */
}

.w-button {
    display: flex;
    flex-direction: row;
}

.w-button>button {
    margin-right: 1vw;
}
</style>